<template>
  <div class="app">
    <el-container>
      <el-header>
        <div class="report_header" style="display: flex;justify-content: space-between;">
          <div>
          <div class="report_header_left"></div>
          <div style="display:flex;">
          <div style="padding-left:10px;width:230px">
            <queryDate @queryDateClick='queryDateClick'></queryDate>
          </div>


          <div class="report_header_query">
            <queryShop @queryShopClick='queryShopClick'></queryShop>
          </div>

          <!--  <div class="report_header_query">
             <queryShop @queryShopClick='queryShopClick'></queryShop>
           </div>
           <div class="report_header_query">
             <queryMember @queryMemberClick="queryMemberClick"></queryMember>
           </div> -->
          <div class="report_header_query">
            <queryEmployee @queryEmployeeClick='queryEmployeeClick' queryTItle='请选择送货员'></queryEmployee>
          </div>
             </div>
                    </div>
          <div>
          <el-button style="margin-left: 10px" size="small" type="primary" @click="loadOrder">查询</el-button>
          <ExportList2Excel ref="exportList2Excel" @handleExport="handleExport" name="导出"/>
          </div>
        </div>
      </el-header>
      <el-main>
        <el-table :height="curHeight" :data="tableData" border style="width: 100%;" :cell-style='timeStyle'
                  @row-dblclick="clickTr">
          <el-table-column type="index" align="center" label="序号" header-align="center" width="50">
            <template slot-scope="scope">{{ scope.$index == tableData.length - 1 ? '总计' : scope.$index + 1 }}</template>
          </el-table-column>
          <el-table-column prop="name" label="送货员" header-align="center" :show-overflow-tooltip="true" width="120">
          </el-table-column>
          <el-table-column prop="orderCount" label="单数" align="center" header-align="center" width="80">
          </el-table-column>
          <el-table-column prop="shippingQry" align="center" width="80" header-align="center" label="送货数量">
          </el-table-column>
          <el-table-column prop="returnsQry" align="center" width="80" header-align="center" label="退货数量">
          </el-table-column>

          <el-table-column prop="effectiveAmt" align="right" width="100" header-align="center" label="实收现金">
          </el-table-column>
          <el-table-column prop="paymentQry" align="right" width="100" header-align="center" label="实收水票">
          </el-table-column>

          <el-table-column prop="adminFreight" align="right" header-align="center" :show-overflow-tooltip="true" width="100"
                           label="配送费">
          </el-table-column>
          <el-table-column prop="levelAmt" align="right" header-align="center" :show-overflow-tooltip="true" width="100"
                           label="楼层费">
          </el-table-column>

          <el-table-column prop="outQry" align="center" width="80" header-align="center" label="出桶数">
          </el-table-column>
          <el-table-column prop="bckQry" align="center" width="80" header-align="center" label="回桶数">
          </el-table-column>
          <el-table-column prop="paymentAmt" align="right" header-align="center" :show-overflow-tooltip="true"
                           width="100" label="收款金额">
          </el-table-column>
          <el-table-column prop="refundsAmt" align="right" label="退款金额" header-align="center"
                           :show-overflow-tooltip="true" width="100">
          </el-table-column>
          <el-table-column prop="plegeQry" align="center" label="压桶数" header-align="center" width="80">
          </el-table-column>
          <el-table-column prop="plegeAmt" align="right" width="100" header-align="center" label="压桶金额">
          </el-table-column>
          <el-table-column prop="returnQry" align="center" width="80" header-align="center" label="退桶数">
          </el-table-column>
          <el-table-column prop="returnAmt" align="right" width="100" header-align="center" label="退桶金额">
          </el-table-column>
          <el-table-column prop="oweQry" align="center" label="客户欠桶" header-align="center" width="80">
          </el-table-column>
          <el-table-column prop="storeQry" align="center" header-align="center" label="客户存桶" width="80">
          </el-table-column>
            <el-table-column align="center"  label="查看详情" width="100">
              <template slot-scope="scope">
              <div class="justify_right shop_Height"  @click="clicklook(scope.row)">
              <a class="details_Title">明细详情</a>
            </div>
              </template>
          </el-table-column>

        </el-table>
      </el-main>
      <el-footer>
        <div class="report_footer_box">
          <pagination style="margin-left: 10px" :total="total" :page.sync="pageNum" :limit.sync="pageSize"
                      @pagination="loadOrder"></pagination>
        </div>
      </el-footer>

      <el-dialog
        title="送货清单"
        :visible.sync="dialogVisible"
        width="800px"
        :before-close="handleClose">

        <div style="overflow:auto;">
          <el-table  :data="DetailedList" border style="width: 100%;"  height="400px">
            <el-table-column prop="name" align="left" label="商品名">
            </el-table-column>
            <el-table-column align="center" label="商品图" width="80">
              <template slot-scope="scope">
                <img style="width:50px;height:50px" :src="scope.row.thumbnail" alt="">
              </template>
            </el-table-column>
            <el-table-column prop="spec1" align="left" width="100"  label="商品规格">
            </el-table-column>
            <el-table-column prop="quantity" align="center" width="100" label="送货数量">
            </el-table-column>
            <el-table-column prop="returnQuantity" align="center" width="100" label="退货数量">
            </el-table-column>
            <el-table-column prop="emptyBarrelQuantity" align="center" label="回桶数量"  width="100">
            </el-table-column>
          </el-table>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
    </el-container>
  </div>
</template>

<script>
// import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
import Pagination from '@/components/Pagination';
import ExportList2Excel from "@/components/ExportList2Excel";
import {deliveryshippingList, summary, shippingItemList} from '@/api/shippingSettle'
import utils from '@/utils/utils'
import permission from '@/directive/permission'
//条件组件
import queryDate from '@/components/Query/queryDate'
import queryShop from '@/components/Query/queryShop'
import queryMember from '@/components/Query/queryMember'
import queryEmployee from '@/components/Query/queryEmployee'

export default {
  name: 'deliverymanReport-list',
  data() {
    return {
      DetailedList: [],
      dialogVisible: false,
      printing: 10000,
      query: {
        shopId: '',
        endDate: '',
        beginDate: '',
        memberId: '',
        employeeId: ''
      },
      tableData: [],
      curHeight: null,
      pageSize: 20,
      total: 0,
      pageNum: 1,
      summaryForm: {
        quantity: 0,
        discount: 0,
        totalCost: 0,
        maoli: 0,
        maolilv: 0,
        totalAmt: 0
      },
    }
  },
  // directives: {
  //   elDragDialog
  // },
  created() {

  },
  components: {
    Pagination,
    queryDate,
    queryShop,
    queryMember,
    queryEmployee,
    ExportList2Excel
  },
  mounted() {
    this.comeIn();
    this.beforeMount();
  },
  methods: {
     clicklook(item){
       console.log(item.id);
       var id=item.id
        this.$router.push({
          path: '/deliverymanReport/datailed',
           query: {
                  beginDate:this.query.beginDate,
                  endDate:this.query.endDate,
                  shopId:this.query.shopId,
                  // employeeId:this.query.employeeId,
                  employeeId:item.id,
                  }
        })
      },
    handleClose() {
      this.dialogVisible = false

    },
    clickTr(row, event, column) {
      console.log(row);
      if (!utils.isNull(row.id)) {
        this.dialogVisible = true
        const params = new URLSearchParams()
        params.append('employeeId', row.id)
        params.append('shopId', this.query.shopId)
        params.append('dstartDate', this.query.beginDate)
        params.append('dendDate', this.query.endDate)
        shippingItemList(params).then(res => {
          this.DetailedList = res.data.data

        })

      }

    },
    timeStyle(column) {
      if (column.columnIndex === 2 || column.columnIndex === 4 || column.columnIndex === 3) {
        return "color: red"
      }
    },
    queryDateClick(data) {
      this.query.beginDate = data.beginDate
      this.query.endDate = data.endDate
    },
    queryShopClick(data) {
      console.log(data)
      this.query.shopId = data.shopId
    },
    queryMemberClick(data) {
      this.query.memberId = data.memberId
    },
    queryEmployeeClick(data) {
      this.query.employeeId = data.employeeId
    },
    beforeMount() {
      var _this = this
      window.onresize = () => {
        return (() => {
          var h = document.documentElement.clientHeight || document.body.clientHeight;
          _this.curHeight = h - 224 //减去页面上固定高度height
        })();
      };
    },
    comeIn() {
      console.log('222')
      var h = document.documentElement.clientHeight || document.body.clientHeight;
      this.curHeight = h - 224 //减去页面上固定高度height
    },
    //下载模板的函数
    handleExport() {
      let _this = this
      var loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      //要导出函数携带的参数
      //要导出函数携带的参数
      let data = {}
      data.tHeader = ['送货员', '送货数量', '退货数量','实收金额', '实收水票','配送费', '楼层费',"订单数", "送货数","回桶数","收款金额", "退款金额",  "压桶数", "压桶金额", "退桶数", '退桶金额', '客户欠桶', "客户存桶"]
      data.filterVal = ['name','shippingQry','returnsQry', 'effectiveAmt', 'paymentQry','adminFreight','levelAmt', "orderCount","outQry","bckQry","paymentAmt", "refundsAmt",  "plegeQry", "plegeAmt", "returnQry", 'returnAmt', 'oweQry', "storeQry"]
      data.filename = "送货结算表";
      const params = new URLSearchParams()
      params.append('pageNum', this.pageNum)
      params.append('pageSize', this.printing)
      params.append('dstartDate', this.query.beginDate)
      params.append('dendDate', this.query.endDate)
      params.append('employeeId', this.query.employeeId)
      params.append('shopId', this.query.shopId)
      params.append('memberId', this.query.memberId)
      deliveryshippingList(params).then(res => {
        data.list = res.data.data
        summary(params).then(response => {
          response.data[0].name = '合计'
          data.list.push(response.data[0])
          _this.$refs.exportList2Excel.handleDownload(data);
          loading.close();
        })
        if (data.list.length == this.printing) {
          this.pageNum++
          console.log(this.pageNum);
          this.handleExport()
        } else {
          return;
        }
      }).catch(error => {
        _this.$refs.exportList2Excel.unlockLoading()
        loading.close();
        console.log('error!!')
      })
      _this.$refs.exportList2Excel.handleDownload(data);
    },
    loadOrder() {
      var _this = this
      console.log(this.query)
      const params = new URLSearchParams()
      params.append('pageNum', this.pageNum)
      params.append('pageSize', this.pageSize)
      params.append('dstartDate', this.query.beginDate)
      params.append('dendDate', this.query.endDate)
      params.append('shopId', this.query.shopId)
      params.append('memberId', this.query.memberId)
      params.append('employeeId', this.query.employeeId)
        deliveryshippingList(params).then(response => {
          _this.tableData = response.data.data
          _this.total = response.data.total
          _this.summaryClick()
        }).catch(error => {
        })

    },
    summaryClick() {
      console.log(this.query)
      var _this = this
      const params = new URLSearchParams()
      params.append('dstartDate', this.query.beginDate)
      params.append('dendDate', this.query.endDate)
      params.append('shopId', this.query.shopId)
      params.append('memberId', this.query.memberId)
      params.append('employeeId', this.query.employeeId)
      summary(params).then(response => {
        if(response.data[0]!=null&&response.data.length>0){
           _this.tableData.push(response.data[0])
        }
      }).catch(error => {
      })
    },
  }
}
</script>

<style scoped>
   .details_Title {
    font-size: 14px;
    color: #409EFF;
  }
.report_header {
  width: 100%;
  height: 50px;
  box-sizing: border-box;
  background-color: white;
  display: flex;
  align-items: center;
}


.report_header_left {
  width: 5px;
  height: 100%;
  background-color: #409EFF;
}

.report_header_date {
  box-sizing: border-box;
  margin-left: 10px;
  width: 260px;
}

.report_header_query {
  margin-left: 10px;
  width: 150px;
}


.report_footer_box {
  width: 100%;
  border: 1px solid #dfe6ec;
  border-top: none;
  height: 60px;
  display: flex;
  align-items: center;
  background-color: white;
}

/deep/ .el-footer {
  padding: 10px;
  padding-top: 0;
}

.report_footer_box_title {
  margin-left: 10px;
  font-size: 12px;
  font-weight: bold;
}

.elOption {
  background-color: #909399;
  color: white;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;
  height: 40px
}


.app {
  background-color: rgba(248, 248, 248, 0.8);
}

/deep/ .el-table--group::after,
.el-table--border::after,
.el-table::before {
  background-color: white;
}

/deep/ .el-table__body tbody .el-table__row:last-child {
  background-color: #F5F7FA;
}

/deep/ .el-main {
  padding: 10px;
  padding-bottom: 0;
}

/deep/ .el-table--enable-row-transition .el-table__body td {
  border-bottom: none;
}

/deep/ .el-table::before {
  height: 0px;
}

/deep/ .el-table--border th {
  background-color: rgba(241, 242, 243, 1);
}

/deep/ .el-header {
  padding: 10px;
}

/deep/ .pagination-container {
  margin-top: 0 !important;
}
</style>
